//入口函数
$(function () {
    // 初始化富文本编辑器
    initEditor();
    //初始化列表
    initCate();

    //获取当前网站的Id值
    let searchParams = new URLSearchParams(location.href.split('?')[1]);
    let Id = searchParams.get("Id")

    // 初始化图片裁剪器
    let $image = $('#image');
    // 裁剪选项
    let options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    };
    // 初始化裁剪区域
    $image.cropper(options);

    //构造获取文章分类，初始化列表的方法
    function initCate() {
        $.ajax({
            url: '/my/article/cates',
            method: 'GET',
            success: function (res) {
                //判断是否成功获取数据，失败则返回错误消息
                if (res.status !== 0) return layui.layer.msg('初始化文章分类失败');
                //调用模板引擎，渲染下拉列表
                let htmlStr = template('tpl-cate', res);
                //渲染文章分类列表
                $('[name=cate_id]').html(htmlStr);
                layui.form.render();
                //渲染页面
                renderPub()
            }
        })
    }

    //注册上传图片事件
    $('#btnChooseImage').on('click', function () {
        $('#coverFile').trigger('click');
        // $('#coverFile').click();
    })

    //监听coverFile的change事件，将图片更换到预览区域里
    $('#coverFile').on('change', function (e) {
        //拿到用户选择的文件
        let file = e.target.files[0];
        //根据选择的文件，创建一个对应的 URL 地址
        let newImgURL = URL.createObjectURL(file);
        //先`销毁`旧的裁剪区域，再`重新设置图片路径`，之后再`创建新的裁剪区域`
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域
    })

    //定义文章的发布状态
    let art_state = '已发布'
    //为存为草稿按钮添加点击事件
    $('#btnSave2').on('click', function () {
        art_state = '草稿'
    })

    //为表单添加提交事件
    $('#form-pub').on('submit', function (e) {
        //阻止默认提交行为
        e.preventDefault();
        //创建一个form对象
        let fd = new FormData($(this)[0]);
        //为对象添加发布状态的属性
        fd.append('state', art_state);
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 为fd对象添加cover_img属性
                fd.append('cover_img', blob);
                //将文章数据传给服务器，发布文章
                published(fd);
            })
    })

    //发布文章的方法
    function published(fd) {
        //通过判断Id,判断是否是通过编辑进入发布文章
        if (location.href.indexOf('Id') !== -1) {
            let id = location.href.split('=')[1];
            fd.append('Id', id);
            //如果是，则修改旧文章
            changePub(fd);
        } else {
            //发布新文章
            releasePub(fd);
        }
    }

    // 渲染页面
    function renderPub() {
        // let Id = location.href.split('=')[1];
        if (!Id) return
        $.ajax({
            url: '/my/article/' + Id,
            method: 'GET',
            success: function (res) {
                //判断是否成功获取文章信息，返回信息
                if (res.status != 0) return layui.layer.msg('获取文章信息失败');
                layui.form.val('pobForm', res.data);
                //富文本填充内容
                tinymce.activeEditor.setContent(res.data.content)
                //关于图片，获取的是本地路径，需要与请求根路径相结合获取真正的路径
                realUrl = 'http://api-breakingnews-web.itheima.net' + res.data.cover_img;
                $image
                    .cropper('destroy')      // 销毁旧的裁剪区域
                    .attr('src', realUrl)  // 重新设置图片路径
                    .cropper(options)        // 重新初始化裁剪区域
            }
        })
    }

    //发布新文章
    function releasePub(fd) {
        $.ajax({
            url: '/my/article/add',
            method: 'POST',
            data: fd,
            //如果向服务器提交的是FormData格式的数据
            //必须添加一下两个配置项
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) return layui.layer.msg('文章发布失败！')
                layui.layer.msg('文章发布成功！');
                //文章发表成功后，应跳转到文章列表页面
                location.href = '/article/art_list.html';
            }
        })

    }

    //修改旧文章
    function changePub(fd) {
        $.ajax({
            url: '/my/article/edit',
            method: 'POST',
            data: fd,
            //如果向服务器提交的是FormData格式的数据
            //必须添加一下两个配置项
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) return layui.layer.msg('文章发布失败！')
                layui.layer.msg('文章发布成功！');
                //文章发表成功后，应跳转到文章列表页面
                location.href = '/article/art_list.html';
            }
        })
    }
})